    
<template>
  <div>
    <HeaderTitle title="私信" />
    <Nmusic v-if="msgs.length == 0" title="暂时还没收到私信" />
    <div class="msgs">
      <div v-for="(item, index) in msgs" :key="index" class="list">
        <div class="img">
          <img :src="item.fromUser.avatarUrl" alt="" />
        </div>
        <div class="details">
          <div class="title">
            <span>{{ item.fromUser.nickname }}</span>
          </div>
          <div class="info" :title="item.lastMsg | msgFilter">
            {{ item.lastMsg | msgFilter }}
          </div>
        </div>
        <div class="timer">
          <div class="time">{{ item.lastMsgTime | timeFilter }}</div>
          <div class="delete"><span>删除</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Nmusic from "@/components/nMusic";
import HeaderTitle from "./HeaderTitle";
import { msgPrivate } from "@/api";
import moment from "moment";
export default {
  name: "privateLetter",
  components: {
    Nmusic,
    HeaderTitle,
  },
  filters: {
    msgFilter: function (val) {
      return JSON.parse(val).msg;
    },
    timeFilter: function (val) {
      return moment(val).format("LTS");
    },
  },
  data() {
    return {
      page: 1,
      more: false,
      msgs: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getMsgPrivate();
    },
    getMsgPrivate() {
      msgPrivate({
        limit: 30,
        offset: (this.page - 1) * 30,
      }).then((data) => {
        this.msgs = data.msgs;
        this.more = data.more;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.msgs {
  .list {
    &:hover .delete {
      display: block !important;
    }
    box-sizing: border-box;
    height: 85px;
    padding: 16px 0;
    display: flex;
    font-size: 12px;
    color: rgb(153, 153, 153);
    .img {
      width: 50px;
      height: 50px;
      margin-right: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .details {
      padding: 6px 0;
      flex: 1;
      display: flex;
      overflow: hidden;
      justify-content: space-between;
      flex-direction: column;
      .title {
        color: #000;
        font-weight: 700;
        span {
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
      .info {
        width: 500px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .timer {
      width: 130px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: right;
      .delete {
        display: none;
        padding-right: 20px;
        color: rgb(12, 115, 194);
        span {
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    &:hover {
      background-color: rgb(245, 245, 245);
    }
  }
}

.footer-size {
  text-align: center;
  margin-top: 25px;
  ::v-deep .el-pagination__sizes {
    display: none;
  }

  ::v-deep li {
    font-weight: 400 !important;
    &:hover {
      border-color: rgb(102, 102, 102) !important;
      color: rgb(51, 51, 51) !important;
    }
    border-radius: 2px;
    border: 1px solid rgb(204, 204, 204) !important;
    background-color: #fff !important;
  }
  ::v-deep li.active {
    background-color: #a2161b !important;
    border-color: rgb(162, 22, 27);
    &:hover {
      color: #fff !important;
      border-color: rgb(102, 102, 102) !important;
    }
  }
}
</style>